<template>
  <div style="height: 100%">
    <vxe-table
      border
      show-overflow
      height="100%"
      :scroll-y="{ enabled: true, gt: 0 }"
      :data="tableData"
    >
      <vxe-column type="seq" width="70"></vxe-column>
      <vxe-column field="name" title="姓名"></vxe-column>
      <vxe-column field="role" title="权限"></vxe-column>
      <vxe-column field="sex" title="性别"></vxe-column>
    </vxe-table>
  </div>
</template>
  
  <script lang="ts" setup>
import { ref } from "vue";
import type { VxeTablePropTypes } from "vxe-table";

interface RowVO {
  id: number;
  name: string;
  role: string;
  sex: string;
}

const tableData = ref<VxeTablePropTypes.Data<RowVO>>([]);

// 模拟行数据
const loadList = (size = 200) => {
  const dataList: RowVO[] = [];
  for (let i = 0; i < size; i++) {
    dataList.push({
      id: 10000 + i,
      name: "测试" + i,
      role: "开发",
      sex: "男",
    });
  }
  tableData.value = dataList;
};

loadList(10000);
</script>